<template>
<div class="wodeShez">
    <div v-bind:class="[beij]"></div>
    <div class="shez-top">
        <samp class="iconfont" @click="fanh1">&#xe641;</samp>设置
        <div class="a"></div>
        <div class="a"></div>
    </div>
    <div class="shez-wode">

        <div class="zhongx">个人中心 <span class="ac">></span></div>
        <div class="b"></div>

        <div class="zhif">支付密码 <span class="ac">></span></div>

    </div>
    <div class="shez-buttom">
        <div class="list" v-for="item of bottomlist" :key="item.id">
            <div class="mima">{{item.desc}} <span>></span></div>
            <div class="a"></div>
            <div class="a"></div>
        </div>
        <span class="banbh">{{banbh}}</span>
    </div>
    <button class="button" @click="tuic">退出登录</button>

    <div class="tuichu" v-show="show">
        <div class="top">是否确定退出登陆</div>
        <div class="bottom">
            <span class="qux" @click="qux">取消</span>
            <span class="qued" @click="qued">确定</span>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'wodeShez',
    data() {
        return {
            beij: "",
            show: false,
            banbh: "v1.0.2.2",
            bottomlist: [{
                    id: "0",
                    desc: "意见反馈"
                },
                {
                    id: "1",
                    desc: "帮助中心"
                },
                {
                    id: "2",
                    desc: "关于我们"
                },
                {
                    id: "3",
                    desc: "版本更新"
                },

            ]
        }
    },
    methods: {
        tuic() {
            this.show = true
            this.beij = "beij"
        },
        qux() {
            this.show = ''
            this.beij = " "
        },
        qued() {
            this.$store.state.islogin = false
            this.$router.go(-1)

            localStorage.islogin = false
        },
        fanh1() {
            this.$router.go(-1)
        }
    },
}
</script>

<style scoped>
.wodeShez {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 177.5%;
    background-color: rgb(240, 239, 239);
    z-index: 302;
    position: relative;
}

.beij {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 177.5%;
    background-color: rgba(0, 0, 0, 0.644);
    position: absolute;
    left: 0px;
    z-index: 500;
}

.a {
    width: 100%;
    height: 0.45px;
    background-color: rgba(190, 190, 190, 0.507);
    position: relative;
    top: 0px;
    left: -6px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.b {
    width: 100%;
    height: 1px;
    background-color: rgba(190, 190, 190, 0.507);
    margin-left: -8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.shez-top {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 10%;
    padding-top: 7%;
    text-align: center;
    position: relative;
    top: 0px;
    font-size: 17px;
    font-weight: bold;
    background-color: rgb(255, 254, 254);
}

.shez-top samp {
    position: absolute;
    left: 8px;
}

.shez-wode {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 15%;
    padding-top: 5%;
    padding-left: 2%;
    background-color: #fff;
}

.zhongx {
    margin-top: -9px;
}

.shez-buttom {

    width: 100%;

    background-color: #fff;
    position: absolute;
    top: 21.5%;
    padding-top: 3%;
}

.button {

    width: 85%;
    height: 30px;
    padding-bottom: 1%;
    position: absolute;
    bottom: 20%;
    left: 7.5%;
    border-radius: 20px;
    background-color: rgba(255, 0, 0, 0.849);
    color: #fff;
}

.mima {
    margin-top: 5px;
    margin-left: 2%;
}

.mima span {
    margin-left: 80%;
}

.ac {
    margin-left: 78.5%;
}

.banbh {
    position: absolute;
    top: 77%;
    right: 8%;
}

.tuichu {
    width: 80%;
    height: 100px;
    position: absolute;
    left: 10%;
    top: 42%;
    background-color: #fff;
    z-index: 501;
    font-size: 15px;
}

.top {
    margin-top: 7%;
    text-align: center;
}

.bottom {
    width: 100%;
    height: 30px;
    margin-top: 9%;
    border-top: solid 0.5px rgba(190, 189, 189, 0.884);
}

.bottom span {

    width: 49.2%;
    height: 24px;
    text-align: center;
    display: inline-block;
    padding-top: 8px;
}

.bottom .qux {
    border-right: solid 0.5px rgba(34, 34, 34, 0.568);
}

.qued {
    color: chocolate;
}
</style>
